Div, Borders, and Boxes

The div tag in CSS helps to set up bock-elements to be formatted with CSS.
In this example, we will see how this tag is used along with properties like border-color, border-style and border-width.
===============================================================
Here is the code of the HTML and embedded CSS style sheets:
=========================================================== 

		<html> 

		<head> 

		<title> Borders and Boxes </title> 
	
		<style type="text/css"> 

			div 	{text-align:left;
			position:relative;
			width:30%;
			border-width:10px; }
			.blue	{border-color: blue;}
			.dashed {border-style: dashed;}
			.dotted {border-style: dotted;}
			.double {border-style: double;}
			.grouve	{border-style:grouve;}
			.inset	{border-style:inset;}
			.medium	{border-width: medium;}
			.outset {border-style:outset;}
			.red	{border-color: red;}
			.ridge	{border-style:ridge;}
			.solid	{border-style:solid;}
			.thick	{border-width: thick;}
			.thin	{border-width:thin;}	
			body 	{font-family: arial, sans-serif;}
			h2		{font-family: arial, sans-serif; text-decoration: underline;}
			p		{font-family: calibri; background-color:yellow;
			font-size: large; margin-bottom: 1em;}		
		</style> 

		</head> 

		<body> 
				
			<p> A set of different border of block-level elements will be displayed. </p> 

			<div class="dotted"> Dotted border </div><hr><hr> 

			<div class="inset"> Inset border </div><hr><hr> 

			<div class="medium"> Medium border </div><hr><hr> 

			<div class="grouve"> Grouve border </div><hr><hr> 
	
			<div class="ridge"> Ridge border </div><hr><hr> 

			<div class="solid"> Solid border </div><hr><hr> 

			<div class="thick"> Thick border </div><hr><hr> 

			<div class="thin"> Thin border </div><hr><hr> 

		</body> 

		</html>
=================================================================

The rendered document looks like this:


For more details, please contact me here.
Date of last modification: 2020.